import React, { FunctionComponent } from 'react';
import MalwareAnalysisEditionContainer, { malwareAnalysisEditionQuery } from './MalwareAnalysisEditionContainer';
import Loader, { LoaderVariant } from '../../../../components/Loader';
import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
import { MalwareAnalysisEditionContainerQuery } from './__generated__/MalwareAnalysisEditionContainerQuery.graphql';
import { malwareAnalysisEditionOverviewFocus } from './MalwareAnalysisEditionOverview';
import useApiMutation from '../../../../utils/hooks/useApiMutation';
import EditEntityControlledDial from '../../../../components/EditEntityControlledDial';

const MalwareAnalysisEdition: FunctionComponent<{ malwareAnalysisId: string }> = ({ malwareAnalysisId }) => {
  const [commit] = useApiMutation(malwareAnalysisEditionOverviewFocus);

  const handleClose = () => {
    commit({
      variables: {
        id: malwareAnalysisId,
        input: { focusOn: '' },
      },
    });
  };

  const queryRef = useQueryLoading<MalwareAnalysisEditionContainerQuery>(malwareAnalysisEditionQuery, { id: malwareAnalysisId });

  return (
    <>
      {queryRef && (
        <React.Suspense
          fallback={<Loader variant={LoaderVariant.inline} />}
        >
          <MalwareAnalysisEditionContainer
            queryRef={queryRef}
            handleClose={handleClose}
            controlledDial={EditEntityControlledDial}
          />
        </React.Suspense>
      )}
    </>
  );
};

export default MalwareAnalysisEdition;
